<template>
  <div class="navHead d-flex flex-sh">
    <div
      class="navItem flex-1 d-flex ai-center jc-center flex-sh"
      @click="handleNav(index)"
      v-for="(item,index) in navList"
      :key="index"
    >
      <!-- 类的动态绑定 写法为:class="{类名:true或false}"  条件为true 那么样式生效-->
      <div
        class="innerItem d-flex w-50 h-100 jc-center ai-center flex-sh"
        :class="{activeInnerItem:item.active}"
      >{{item.title}}</div>
    </div>
  </div>
</template>
 
<script>
export default {
  name: "vueName",
  data() {
    return {
      navList: [
        {
          title: "推荐音乐",
          active: true,
          path: "/"
        },
        {
          title: "热歌榜",
          active: false,
          path: "/hotMusic"
        },
        {
          title: "搜索",
          active: false,
          path: "/search"
        }
      ]
    };
  },
  created() {
    const activeIndex = Number(sessionStorage.activeNav) || 0;
    this.navList.forEach((item, index) => {
      this.navList[index].active = false;
    });
    this.navList[activeIndex].active = true;
  },
  methods: {
    handleNav(index) {
      this.navList.forEach((item, index) => {
        this.navList[index].active = false;
      });
      this.navList[index].active = true;
      this.$router.push(this.navList[index].path);
      sessionStorage.activeNav = index;
    }
  }
};
</script>
 
<style scoped lang = "scss">
.navHead {
  width: 100%;
  height: 40px;
  .navItem {
    height: 100%;
    .innerItem {
      flex-grow: 0;
      font-size: 15px;
      flex-shrink: 0;
    }
    .activeInnerItem {
      color: $primary;
      position: relative; /*父相子绝 */
      &::after {
        /*sass里面是有伪类比如:after 要写成&:after  */
        width: 100%;
        content: "";
        height: 5px;
        background: $primary;
        position: absolute;
        transform: scaleY(0.5);
        left: 0;
        bottom: 0;
      }
    }
  }
}
</style>